<template>
<uni-shadow-root class="polyv-sdk-components-ppt-ppt"><view :class="'plv-ppt plv-mp-skin__'+(skin)" :style="'width:'+(width)+'rpx;height:'+(height)+'rpx'">
  <view id="plvPPTDom" class="plv-ppt-dom">
    <image :src="imgUrl" class="plv-ppt-dom-img" mode="aspectFit" @load="handleImgLoad"></image>
    <view id="plvPPTDomLoad" class="plv-ppt-dom-load" :style="'display:'+(isLoading?'block':'none')">
      <view class="line-spin-fade-loader">
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
        <view class="line-spin-fade-laoder__view"></view>
      </view>
    </view>
    <canvas class="plv-ppt-dom-paint" canvas-id="paintbrush" :style="(canvasStyle)+(isBoard?'background:#fff;':'')" id="paintbrush"></canvas>
    <view :style="canvasStyle">
      <image src="../../assets/images/draw-laser.png" class="plv-ppt-dom-laser" :hidden="(!showLaser)" :style="'left:'+(laserStyle.x-5)+'px;top:'+(laserStyle.y-5)+'px;'"></image>
    </view>
  </view>
  
</view></uni-shadow-root>


</template><script>

global['__wxRoute'] = 'polyv-sdk/components/ppt/ppt'
import setWatcher from"../../common/utils/watch";import Paintbush from"../../common/ppt/paintbrush";import PPT from"../../common/ppt/ppt";import SocketEvent from"../../common/ppt/socketEvent";import PPT_EVENT from"../../common/ppt/EVENT";const{CHANGE_IMG_SRC:CHANGE_IMG_SRC,SHOW_BOARD:SHOW_BOARD,HIDE_BOARD:HIDE_BOARD,PPT_RELOAD:PPT_RELOAD,PPT_PAGE_CHANGE:PPT_PAGE_CHANGE}=PPT_EVENT;import store from"../../store/index";import{preventShake}from"../../common/utils/common";const resizeWithShape=preventShake.debounce(function({width:t=resizeWithShape.width,height:e=resizeWithShape.height,$this:i,toResetSize:s=!1}){resizeWithShape.width=t,resizeWithShape.height=e;const{style:h}=i.getSize(t/e);(s||i.data.canvasStyle!==h)&&(i.setData({canvasStyle:h}),i.getDomSize("#paintbrush").then(({width:t,height:e})=>{i.paintCtrl&&i.paintCtrl.setMeasurement({width:t,height:e,pageId:i.pptCtrl&&i.getCurrentPage()||0,pageType:i.socketEvent.pageType})}).catch(console.error),i.socketEvent&&(i.socketEvent.happenResize=!0))},100);Component({properties:{width:{type:Number,value:750},height:{type:Number,value:750},pptSize:{type:Object,observer(t){const{width:e,height:i}=this.pptSize=t;e&&i&&(this.init.isInit?(this.setData({width:e,height:i}),this.resize(e,i)):this.init({width:e,height:i}))}},chatData:{type:Object,observer(t){this.chatData=t,this.socketEvent&&this.socketEvent.setChatData(t)}},videoId:{type:String,observer(t){this.socketEvent&&this.socketEvent.setVideoId(t)}},vidCurrentTime:{type:Number,observer(t){this.setData({vidTime:t})}},pptDelayTime:{type:Number,value:3e3,observer(t){this.socketEvent&&parseInt(t)>=0&&(this.socketEvent.delayTime=parseInt(t))}},skin:{type:String,value:"black",observer(t){"black"!==t&&"white"!==t&&this.setData({skin:"black"})}},togglePaint:{type:Boolean,value:!0,observer(t){this.paintCtrl&&this.paintCtrl.togglePaint(t)}},requestUrl:{type:String,value:"https://api.polyv.net/live/v3/channel/chat/"}},data:{isLoading:!1,imgUrl:"",paintSize:{width:"100%",height:"100%"},canvasStyle:"position:absolute;left:0;top:0;height:100%;width:100%;",paintCtrl:null,isBoard:!1,log:"test",vidTime:0,pptInFullScreen:!1,showLaser:!1,laserStyle:{left:0,right:0},currentWhiteNum:0},lifetimes:{created(){},attached(){this.unsub=store.get({"main.chat":t=>{this.chat=t,t&&this.socketEvent&&this.socketEvent.setChat(this.chat)}}),this.watch={imgUrl(){this.setData({isLoading:!0})}},this.timer=null,setWatcher(this)},detached(){this.unsub(),this.init.isInit=!1}},pageLifetimes:{resize(t){}},methods:{init({width:t,height:e,sliceIdData:i}=this.data){this.init.isInit=!0,this.setData({width:t,height:e}),this.pptCtrl=new PPT,this.pptCtrl.subscribe(this.pptEvent.bind(this));const s=wx.createCanvasContext("paintbrush",this);this.paintCtrl=new Paintbush(s,{width:t,height:e}),this.paintCtrl.on("laserPaint",({status:t,x:e,y:i})=>{const s={showLaser:t};t&&(s.laserStyle={x:e,y:i}),this.setData(s)}).on("resize",({clientWidth:t,clientHeight:e})=>{this.resize(t,e)}),this.socketEvent=new SocketEvent({chat:this.chat,pptCtrl:this.pptCtrl,paintCtrl:this.paintCtrl,delayTime:this.pptDelayTime,getCurrentTime:t=>t({time:1e3*this.data.vidTime||0}),requestUrl:this.properties.requestUrl}),this.properties.videoId&&this.socketEvent.setVideoId(this.properties.videoId),i&&(this.socketEvent._setLiveStatus(!0),this.socketEvent.onSliceId(i)),this.socketEvent.subscribe(({EVENT:t,data:e,pageId:i})=>{switch(t){case SHOW_BOARD:this.sendPptPageChange(i),this.setData({currentWhiteNum:i}),this.showBoard();break;case HIDE_BOARD:this.sendPptPageChange(i),this.hideBoard();break;case"log":break;case PPT_RELOAD:this.reload(e)}})},reload(t){this.pptCtrl=void 0,this.paintCtrl=void 0,this.socketEvent=void 0;const{width:e,height:i}=this.data;this.init({width:e,height:i,sliceIdData:t}),resizeWithShape({$this:this,toResetSize:!0})},handleImgLoad(t){this.setData({isLoading:!1});const{width:e,height:i}=t.detail;this.resize(e,i)},resize(t,e){resizeWithShape({width:t,height:e,$this:this})},getSize(t){const e=this.data.width,i=this.data.height,s=e/i;let h=e,a=i;const r=t||this.data.prop||4/3;return this.setData({prop:r}),s>r?h=r*a:s<r&&(a=h/r),{width:h,height:a,style:`position:absolute;left:50%;top:50%;height:${a}rpx;width:${h}rpx;margin-left:-${h/2}rpx;margin-top:-${a/2}rpx;`}},showBoard(t){if("number"==typeof t){const{style:e}=this.getSize(t);this.data.canvasStyle!==e&&this.setData({canvasStyle:e})}this.setData({isBoard:!0})},hideBoard(){this.setData({isBoard:!1})},getDomSize(t){const e=this,i=wx.createSelectorQuery().in(this);return i.select(t).boundingClientRect(),i.selectViewport().scrollOffset(),new Promise((s,h)=>{i.exec(function(i){if(i&&i.length&&null!==i[0]&&"object"==typeof i[0]){const{width:h,height:a}=i[0];0===parseInt(h)?setTimeout(()=>s(e.getDomSize(t)),500):s({width:h,height:a})}else h(new Error("查找不到尺寸"))})})},pptEvent(t){const{EVENT:e,src:i,page:s}=t;switch(e){case CHANGE_IMG_SRC:this.setData({imgUrl:i});break;case PPT_PAGE_CHANGE:this.sendPptPageChange(s),this.paintCtrl.redraw(s)}},handleTapPreBtn(){if(this.pptCtrl&&(!this.socketEvent.isLive||parseInt(this.getCurrentPage())>0))if(this.data.isBoard){const t=this.getCurrentPage()-1;this.socketEvent.openWhiteBoard(t<0?0:t)}else this.pptCtrl.gotPreviousPage()},handleTapNextBtn(){this.pptCtrl&&(!this.socketEvent.isLive||parseInt(this.getCurrentPage())<parseInt(this.socketEvent.maxTeacherOp.pageId))&&(this.data.isBoard?this.socketEvent.openWhiteBoard(this.getCurrentPage()+1):this.pptCtrl.gotNextPage())},toCurrentTeacherOp(){this.socketEvent&&this.socketEvent.toCurrentTeacherOp()},getCurrentPage(){return this.data.isBoard?this.data.currentWhiteNum:this.pptCtrl&&this.pptCtrl.currentPageNum},sendPptPageChange(t){this.triggerEvent("pptPageChange",{page:t,maxPage:this.socketEvent&&this.socketEvent.maxTeacherOp&&this.socketEvent.maxTeacherOp.pageId,isLive:this.socketEvent&&this.socketEvent.isLive})}}});
export default global['__wxComponents']['polyv-sdk/components/ppt/ppt']
</script>
<style platform="mp-weixin">
.plv-ppt{background:url() no-repeat #393842;background-position:50%;background-size:200rpx;background-color:#393842;text-align:center}.plv-ppt-dom{position:relative;overflow:hidden}.plv-ppt-dom,.plv-ppt-dom-img{width:100%;height:100%}.plv-ppt-dom-load{position:absolute;top:50%;left:50%;z-index:1000;background-size:100px;width:50px;height:50px}.plv-ppt-dom-load .line-spin-fade-loader{position:relative;top:-10px;left:-4px;transform:scale(1)}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:first-child{top:20px;left:0;animation:a 1.2s -.84s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(2){top:13.63636px;left:13.63636px;transform:rotate(-45deg);animation:a 1.2s -.72s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(3){top:0;left:20px;transform:rotate(90deg);animation:a 1.2s -.6s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(4){top:-13.63636px;left:13.63636px;transform:rotate(45deg);animation:a 1.2s -.48s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(5){top:-20px;left:0;animation:a 1.2s -.36s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(6){top:-13.63636px;left:-13.63636px;transform:rotate(-45deg);animation:a 1.2s -.24s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(7){top:0;left:-20px;transform:rotate(90deg);animation:a 1.2s -.12s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view:nth-child(8){top:13.63636px;left:-13.63636px;transform:rotate(45deg);animation:a 1.2s 0s infinite ease-in-out}.plv-ppt-dom-load .line-spin-fade-loader>.line-spin-fade-laoder__view{background-color:#1487ff;width:4px;height:35px;border-radius:2px;margin:2px;animation-fill-mode:both;position:absolute;width:5px;height:15px}@keyframes a{50%{opacity:.3}to{opacity:1}}.plv-ppt-dom-btns-btn{position:absolute;top:0;display:inline-block;width:140rpx;height:100%;cursor:pointer}.plv-ppt-dom-btns-btn-icon{background:url() no-repeat;background-size:380rpx 380rpx;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next{right:0}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next .plv-ppt-dom-btns-next-icon{height:120rpx;width:120rpx;background-position:0rpx -130rpx}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next .plv-ppt-dom-btns-next-icon:hover{height:120rpx;width:120rpx;background-position:-130rpx 0rpx}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next-disable{opacity:.5}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next-disable-icon,.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-next-disable-icon:hover{height:120rpx;width:120rpx;background-position:0rpx 0rpx}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev{left:0}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev .plv-ppt-dom-btns-prev-icon{height:120rpx;width:120rpx;background-position:0rpx -260rpx}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev .plv-ppt-dom-btns-prev-icon:hover{height:120rpx;width:120rpx;background-position:-260rpx -130rpx}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev-disable{opacity:.5}.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev-disable-icon,.plv-ppt-dom-btns-btn.plv-ppt-dom-btns-prev-disable-icon:hover{height:120rpx;width:120rpx;background-position:-260rpx 0rpx}.plv-ppt-dom-btns-back{position:absolute;left:50%;width:300rpx;height:90rpx;margin-left:-150rpx;top:80%;background-color:#fff;color:#000;font-size:30rpx;border-radius:45rpx;text-align:center;line-height:90rpx;vertical-align:middle;border:0 solid #000;filter:progid:DXImageTransform.Microsoft.Shadow(color=#000,strength=4);box-shadow:0 0 20rpx #000;cursor:pointer}.plv-mp-skin__white{background:url() no-repeat #393842;background-color:#f5f9fa;background-position:50%;background-size:200rpx;text-align:center}.plv-ppt-dom-laser{position:absolute;left:0;top:0;width:40rpx;height:40rpx}
	.chucuno {
		position: absolute;
		top: 50%;
		margin-top: -150rpx;
		z-index: 99999;
		left: 50%;
		margin-left: -325rpx;
	}

.back-tankuang {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99999;
		height: 100%;
		background: rgba(51, 51, 51, 0.5);
	}</style>